<template>
  <back-btn></back-btn>
  <div id="app"></div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, markRaw } from "vue";

export default defineComponent({
  setup() {
    /* toRaw */
    const userInfo = reactive({
      name: "温情key",
      age: 23,
    });

    const toRawInfo = toRaw(userInfo);

    console.log(userInfo);
    console.log(toRawInfo);

    /* markRaw */
    const obj = {
      name: "温情key",
    };

    // 标记不能转换为响应式
    let markObj = markRaw(obj);
    // 尝试转换为响应式
    let reactiveObj = reactive(markObj);

    console.log(reactiveObj);

    return {
      userInfo,
      toRawInfo,
      reactiveObj,
    };
  },
});
</script>

<style scoped></style>
